<template>
  <div>
    <!-- 头部 -->
    <el-card class="head-content">
      <div class="head-content-box">
        <span class="head-content-txt">素材管理</span>
        <div style="width: 1px;height: 50px;background-color: #797979; margin-left: 20px;" />
        <div class="head-content-txt-newlyAdded" @click="NewAuthor">
          <i class="el-icon-circle-plus-outline head-content-txt-newlyAdded-icon" />
          <span class="head-content-txt-newlyAdded-txt">新增素材</span>
        </div>
      </div>
    </el-card>
    <!-- 表格 -->
    <el-card class="form-content">
      <el-form ref="form" :model="query" :inline="true" size="small">
        <el-form-item prop="sourceTitle">
          <el-input v-model="query.sourceTitle" placeholder="请输入标题关键词" />
        </el-form-item>
        <el-form-item prop="classId">
          <el-select v-model="query.classId" clearable placeholder="请选择分类">
            <el-option
              v-for="label of labelDataList"
              :key="'label'+label.id"
              :label="label.className"
              :value="label.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="status">
          <el-select v-model="query.status" placeholder="请选择状态">
            <el-option label="全部" value="" />
            <el-option label="启用" value="Y" />
            <el-option label="禁用" value="N" />
          </el-select>
        </el-form-item>
        <el-form-item prop="timeDate">
          <el-date-picker
            v-model="query.timeDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData('init')">搜索</el-button>
          <el-button type="primary" @click="empty">重置</el-button>
          <el-button type="primary" :disabled="multipleSelection.length == 0" @click="showRoleDialog">批量修改可看范围</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%" @selection-change="(val) => multipleSelection = val">
        <el-table-column
          type="selection"
        />
        <el-table-column prop="sourceTitle" label="标题" align="center" />
        <el-table-column label="内容" align="center">
          <template slot-scope="scope">
            <viewer :images="scope.row.imgList">
              <img
                v-for="(img,idx) in scope.row.imgList"
                :key="'img'+idx"
                class="avue-upload__avatar"
                :src="img.path"
                style="width: 30px; height: 30px;"
              >
            </viewer>
          </template>
        </el-table-column>
        <el-table-column prop="classNm" label="分类" align="center" />
        <el-table-column prop="state" label="状态" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.status == 'Y'? '启用':'禁用' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="创建时间" align="center">
          <template slot-scope="scope">
            <span>{{ dayjs(scope.row.createTm).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderSn" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="statusChange(scope.row)">{{ scope.row.status == 'Y'? '禁用' : '启用' }}</el-button>
            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">

        <el-pagination
          :current-page="page.currentpage"
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          layout="total, prev, pager, next"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 批量修改可看权限 -->
    <AllSelectRole v-model="allSelectRoleVis" :select-row="multipleSelection" @submit="saveAllRole" />
  </div>
</template>

<script>
import {
  sourceInfoList,
  sourceClassInfoList,
  sourceInfoUpd,
  sourceInfoBatAuth,
  sourceInfoDel
} from '@/api/knowledge'
import dayjs from 'dayjs'
import AllSelectRole from './components/AllSelectRole.vue'
export default {
  components: {
    AllSelectRole
  },
  data() {
    return {
      dayjs,
      dialogFormVisible: false, // 新增作者模态框
      allSelectRoleVis: false,
      multipleSelection: [],
      query: {
        sourceTitle: '', // 标题关键字
        classification: '', // 选择分类
        state: '', // 选择状态
        timeDate: [
          // dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
          // dayjs().format('YYYY-MM-DD')
        ] // 日期
      },
      labelDataList: [],
      tableData: [],
      // 分页对象
      page: {
        currentpage: 1,
        pageSizes: [10, 15, 20, 25],
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.getBasedata()
    this.fetchData('init')
  },
  methods: {
    showRoleDialog() {
      if (this.multipleSelection.length > 0) {
        this.allSelectRoleVis = true
      } else {
        this.$message.error('至少选择一条数据')
      }
    },
    saveAllRole(data) {
      console.log('saveAllRole', data)
      const obj = {
        ids: this.multipleSelection.map(v => v.id).toString(),
        roleNm: data.roleNm.join(','),
        agtList: data.agtListObj
      }
      console.log('saveAllRole', data, this.multipleSelection)
      console.log('obj', obj)
      sourceInfoBatAuth(obj).then(res => {
        this.$message.success('修改成功')
        this.allSelectRoleVis = false
        this.fetchData()
      })
    },
    getBasedata() {
      sourceClassInfoList({
        pageSize: 999,
        currentPage: 1
      }).then(res => {
        this.labelDataList = res.data.list
      })
    },
    // 禁用
    statusChange(data) {
      const tip = data.status == 'N' ? '当前素材已禁用，是否启用？' : '当前素材已启用，是否禁用？'
      this.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sourceInfoUpd({
          ...data,
          agtList: data.agtList == '0' ? [] : JSON.parse(data.agtList),
          id: data.id,
          classId: data.classId,
          oldClassId: data.classId,
          status: data.status == 'Y' ? 'N' : 'Y'
        }).then(res => {
          this.$message.success('操作成功')
          this.fetchData('init')
        })
      })
    },
    // 新增素材
    NewAuthor() {
      this.$router.push({
        name: 'NewMaterial'
      })
    },
    // 搜索
    fetchData(type) {
      if (type == 'init') {
        this.page = {
          ...this.page,
          currentpage: 1
        }
      }
      const obj = {
        ...this.query,
        currentPage: this.page.currentpage,
        pageSize: this.page.pageSize,
        beginDate: this.query.timeDate && this.query.timeDate.length ? this.query.timeDate[0] : '2021-01-01',
        endDate: this.query.timeDate && this.query.timeDate.length ? this.query.timeDate[1] : dayjs().format('YYYY-MM-DD')
      }
      delete obj.timeDate
      console.log('submit!', obj)
      sourceInfoList(obj).then(res => {
        console.log('authorInfoList', res)
        const { list, total } = res.data
        this.tableData = list.map(item => {
          return {
            ...item,
            imgList: JSON.parse(item.sourcePath)
          }
        })
        this.page.total = total
      })
    },
    // 重置
    empty() {
      this.query = {
        sourceTitle: '', // 标题关键字
        classification: '', // 选择分类
        state: '', // 选择状态
        timeDate: [
          // dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
          // dayjs().format('YYYY-MM-DD')
        ] // 日期
      }
      this.fetchData('init')
    },
    // 编辑
    edit(row) {
      this.$router.push({
        name: 'NewMaterial',
        query: {
          type: 'edit',
          sourceId: row.id
        }
      })
    },
    // 删除
    del({ id }) {
      this.$confirm('此操作将永久删除该素材, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sourceInfoDel({ id }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.fetchData('init')
        })
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.page.currentpage = val
      this.fetchData()
    }

  }
}
</script>

<style lang="scss" scoped="scoped">
  .head-content {
    width: 100%;

    .head-content-box {
      display: flex;
      align-items: center;

      .head-content-txt {
        font-size: 24px;
        font-weight: 500;
      }

      .head-content-txt-newlyAdded {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 3%;

        .head-content-txt-newlyAdded-icon {
          font-size: 28px;
        }

        .head-content-txt-newlyAdded-txt {
          font-size: 14px;
        }
      }
    }
  }
</style>
